<!--
 * Description: 系统岗位主页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Dongxu.Ni
 * Date: 2020/03/21 05:53
-->

<template>
  <BaseWrap>
    <!-- 查询条件 -->
    <BaseFunc
      :is-requesting="isRequesting"
      :query-form="queryForm"
      :visible.sync="advanceOptionDrawer"
      @query="query"
    >
      <template slot="btn">
        <!--系统岗位添加按钮-->
        <el-button
          v-if="$hasPer('add')"
          class="btn-custom"
          icon="el-icon-circle-plus-outline"
          plain
          size="mini"
          type="primary"
          @click="addDialogVisible = true"
        >
          {{ $t('button.add') }}
        </el-button>
      </template>
      <template>
        <!--抽屉内部查询表单-->
        <el-form class="g-advance-drawer-form" label-width="100px" :model="queryForm" size="small">
          <el-row>
            <el-col :span="6">
              <!--岗位名称-->
              <el-form-item :label="$t('PostManager.postName')">
                <el-input
                  v-model="queryForm.postName"
                  clearable
                  :placeholder="$t('input.placeholder')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!--岗位描述-->
              <el-form-item :label="$t('PostManager.postDesc')">
                <el-input
                  v-model="queryForm.postDesc"
                  clearable
                  :placeholder="$t('input.placeholder')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!--岗位级别-->
              <el-form-item :label="$t('PostManager.postLevel')">
                <el-input
                  v-model="queryForm.postLevel"
                  clearable
                  :placeholder="$t('input.placeholder')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!--父级岗位-->
              <el-form-item :label="$t('PostManager.parentPost')">
                <el-select
                  v-model="queryForm.parentPost"
                  clearable
                  :placeholder="$t('select.placeholder')"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in selfAndSubPostListOptions"
                    :key="item.postId"
                    :label="item.postName"
                    :value="item.postId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!--创建人-->
              <el-form-item :label="$t('record.createUser')">
                <el-select
                  v-model="queryForm.createUser"
                  clearable
                  filterable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['user/getUserSimpleCollects']"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                  >
                    <span style="float: left;">{{ item.userName }}</span>
                    <span style="float: right; color: #b4b4b4; font-size: 12px">
                      {{ item.team }}
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!--修改人-->
              <el-form-item :label="$t('record.modifyUser')">
                <el-select
                  v-model="queryForm.modifyUser"
                  clearable
                  filterable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['user/getUserSimpleCollects']"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                  >
                    <span style="float: left;">{{ item.userName }}</span>
                    <span style="float: right; color: #b4b4b4; font-size: 12px">
                      {{ item.team }}
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!--创建时间开始-->
              <el-form-item :label="$t('record.createTimeBegin')">
                <el-date-picker
                  v-model="queryForm.createTimeBegin"
                  :placeholder="$t('timePicker.placeholderTimeBegin')"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss[.000]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!--创建时间结束-->
              <el-form-item :label="$t('record.createTimeEnd')">
                <el-date-picker
                  v-model="queryForm.createTimeEnd"
                  :placeholder="$t('timePicker.placeholderTimeEnd')"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss[.999]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!--修改时间开始-->
              <el-form-item :label="$t('record.modifyTimeBegin')">
                <el-date-picker
                  v-model="queryForm.modifyTimeBegin"
                  :placeholder="$t('timePicker.placeholderTimeBegin')"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss[.000]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!--修改时间结束-->
              <el-form-item :label="$t('record.modifyTimeEnd')">
                <el-date-picker
                  v-model="queryForm.modifyTimeEnd"
                  :placeholder="$t('timePicker.placeholderTimeEnd')"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss[.999]"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </BaseFunc>

    <BaseTable
      :is-requesting="isRequesting"
      :page-number.sync="pageNumber"
      :page-size.sync="pageSize"
      :table-data="tableData"
      :total="total"
      @query="query"
    >
      <template slot="header">
        <!--序号列-->
        <el-table-column align="center" fixed :label="$t('table.NO')" width="80">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
      </template>

      <template>
        <!--岗位名称列-->
        <el-table-column
          align="center"
          :label="$t('PostManager.postName')"
          min-width="250px"
          prop="postName"
          show-overflow-tooltip
        />
        <!--岗位描述列-->
        <el-table-column
          align="center"
          :label="$t('PostManager.postDesc')"
          min-width="200px"
          prop="postDesc"
          show-overflow-tooltip
        />
        <!--父级岗位列-->
        <el-table-column align="center" :label="$t('PostManager.parentPost')" min-width="220px">
          <template slot-scope="scope">
            <span>{{ findPostName(scope.row.parentPost) }}</span>
          </template>
        </el-table-column>
        <!--部门团队-->
        <el-table-column
          align="center"
          :label="$t('PostManager.team')"
          min-width="120px"
          prop="team"
        />
        <!--bu类型-->
        <el-table-column align="center" :label="$t('PostManager.bu')" min-width="100px" prop="bu" />
        <!--GCM功能-->
        <el-table-column align="center" label="GCM功能" min-width="100px" prop="gcmFunction" />
        <!--岗位级别 0级开始 - n级列-->
        <el-table-column align="center" :label="$t('PostManager.postLevel')" min-width="100px">
          <template slot-scope="scope">
            <span>{{ scope.row.postLevel + '级' }}</span>
          </template>
        </el-table-column>
        <!--创建人列-->
        <el-table-column align="center" :label="$t('record.createUser')" min-width="150px">
          <template slot-scope="scope">
            <span>{{ $store.getters['user/getUserNameById'](scope.row.createUser) }}</span>
          </template>
        </el-table-column>
        <!--创建时间列-->
        <el-table-column
          align="center"
          :label="$t('record.createTime')"
          min-width="250px"
          prop="createTime"
        />
        <!--修改人列-->
        <el-table-column align="center" :label="$t('record.modifyUser')" min-width="150px">
          <template slot-scope="scope">
            <span>{{ $store.getters['user/getUserNameById'](scope.row.modifyUser) }}</span>
          </template>
        </el-table-column>
        <!--修改时间列-->
        <el-table-column
          align="center"
          :label="$t('record.modifyTime')"
          min-width="250px"
          prop="modifyTime"
        />
      </template>

      <template slot="end">
        <!--操作列-->
        <el-table-column
          v-if="$hasPer('edit') || $hasPer('delete')"
          align="center"
          fixed="right"
          :label="$t('table.operate')"
          min-width="150px"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasPer('edit')"
              size="mini"
              type="text"
              @click="rowEdit(scope.$index, scope.row)"
            >
              <i class="el-icon-edit el-icon--right"></i>
              {{ $t('button.edit') }}
            </el-button>
            <el-button
              v-if="$hasPer('delete')"
              size="mini"
              type="text"
              @click="rowDelete(scope.$index, scope.row)"
            >
              <i class="el-icon-delete el-icon--right"></i>
              {{ $t('button.delete') }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </BaseTable>
    <!--新增对话框-->
    <el-dialog
      v-if="addDialogVisible"
      :append-to-body="true"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="$t('PostManager.postAdd')"
      :visible.sync="addDialogVisible"
      width="55%"
    >
      <PostAdd @cancel="addDialogVisible = false" @save="afterAddSave" />
    </el-dialog>
    <!--编辑对话框-->
    <el-dialog
      v-if="editDialogVisible"
      :append-to-body="true"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="$t('PostManager.postEdit')"
      :visible.sync="editDialogVisible"
      width="55%"
    >
      <PostEdit
        :input-data="currentEditRow"
        @cancel="editDialogVisible = false"
        @save="afterEditSave"
      />
    </el-dialog>
  </BaseWrap>
</template>

<script>
import { postPageListSubordinate, postDelete } from '../../../api/sys/post'
import PostAdd from './components/PostAdd'
import PostEdit from './components/PostEdit'

export default {
  name: 'PostManager',
  components: { PostAdd, PostEdit },
  props: {},
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 高级查询选项抽屉弹出标识
      advanceOptionDrawer: false,
      // 页码
      pageNumber: 1,
      // 页展示行数
      pageSize: 10,
      // 总行数
      total: 0,
      // 表格数据
      tableData: [],
      // 查询表单对象
      queryForm: {
        // 岗位编号
        postId: '',
        // 岗位名称
        postName: '',
        // 岗位描述
        postDesc: '',
        // 父级岗位
        parentPost: '',
        // 岗位级别 0级开始 - n级
        postLevel: '',
        // 团队 PBM/GCM
        team: '',
        // BU类型 TNB/LNB
        bu: '',
        // 功能类型 ME/EE/PKG
        function: '',
        // 创建人岗位
        createPost: '',
        // 创建人
        createUser: '',
        // 创建时间
        createTime: '',
        // 修改人岗位
        modifyPost: '',
        // 修改人
        modifyUser: '',
        // 修改时间
        modifyTime: '',
        // 系统记录状态 有效标识 1 有效 0 无效
        recordState: ''
      },
      // 新增对话框可见标识
      addDialogVisible: false,
      // 编辑对话框可见标识
      editDialogVisible: false,
      // 当前编辑行的数据
      currentEditRow: {}
    }
  },
  computed: {
    // 自身和下属岗位集合
    selfAndSubPostListOptions() {
      return this.$store.getters['post/getSelfAndSubPostList']
    }
  },
  watch: {},
  created() {
    this.pageDataInit()
  },
  mounted() {},
  methods: {
    pageDataInit() {
      this.query()
    },
    /* 查询表格数据*/
    async query() {
      try {
        this.isRequesting = true
        this.advanceOptionDrawer = false
        const response = await postPageListSubordinate({
          pageSize: this.pageSize,
          pageNumber: this.pageNumber,
          pageCondition: this.queryForm
        })
        this.tableData = response.data.list
        this.total = response.data.total
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    /* 行记录编辑*/
    rowEdit(index, row) {
      this.currentEditRow = row
      this.editDialogVisible = true
    },
    /* 行记录删除 */
    async rowDelete(index, row) {
      try {
        await this.$confirmBox(this.$t('button.delete'), 'error')
        this.isRequesting = true
        await postDelete({ postId: row.postId })
        this.query()
        this.$store.dispatch('post/initPostSimpleCollects')
        this.$store.dispatch('post/initSubPostList')
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    // 新增保存之后
    afterAddSave() {
      this.addDialogVisible = false
      this.query()
      this.$store
        .dispatch('post/initPostSimpleCollects')
        .then()
        .catch(err => console.log(err))
      this.$store
        .dispatch('post/initSubPostList')
        .then()
        .catch(err => console.log(err))
    },
    // 修改保存之后
    afterEditSave() {
      this.editDialogVisible = false
      this.query()
      this.$store
        .dispatch('post/initPostSimpleCollects')
        .then()
        .catch(err => console.log(err))
      this.$store
        .dispatch('post/initSubPostList')
        .then()
        .catch(err => console.log(err))
    },
    // 查找岗位名称
    findPostName(postId) {
      const post = this.selfAndSubPostListOptions.find(p => p.postId === postId)
      return post ? post.postName : postId
    }
  }
}
</script>

<style scoped></style>
